{template 'common/header'} 
{template 'web/common'} 


<style type='text/css'>
	.tab-content>.tab-pane {
    	visibility: visible;
	}
</style>

<div class="main">
	<ul class="nav nav-tabs">
	    <li {if $operation=='display'}class="active"{/if}><a href="{php echo $this->createWebUrl('manage',array('op'=>'display'))}">海报管理</a></li>
	    <li {if $operation=='post'}class="active"{/if}><a href="{php echo $this->createWebUrl('manage',array('op'=>'post','id'=>$_GPC['id']))}">添加海报</a></li>
	</ul>
	
	{if $operation == 'post'}
		{template 'web/manage/tpl/post'}
	{elseif $operation == 'log'}
		{template 'web/manage/tpl/log'}
	{elseif $operation == 'display'}
		{template 'web/manage/tpl/display'}
	{elseif $operation == 'statistics'}
		{template 'web/manage/tpl/statistics'}
	{elseif $operation == 'gift'}
		{template 'web/manage/tpl/gift'}
	{/if}

	<script type="text/javascript">
		$('.btn').hover(function () {
		    $(this).tooltip('show');
		}, function () {
		    $(this).tooltip('hide');
		});

		function showImageDialog(elm, opts, options) {
			require(["util"], function(util){
				var btn = $(elm);
				var ipt = btn.parent().prev();
				var val = ipt.val();
				var img = ipt.parent().next().children();
				options = {'global':false,'class_extra':'','direct':true,'multiple':false,'fileSizeLimit':5120000};
				util.image(val, function(url){
					if(url.url){
						if(img.length > 0){
							img.get(0).src = url.url;
						}
						ipt.val(url.attachment);
						ipt.attr("filename",url.filename);
						ipt.attr("url",url.url);
					}
					if(url.media_id){
						if(img.length > 0){
							img.get(0).src = "";
						}
						ipt.val(url.media_id);
					}
				}, options);
			});
		}
		function deleteImage(elm){
			$(elm).prev().attr("src", "./resource/images/nopic.jpg");
			$(elm).parent().prev().find("input").val("");
		}

	</script>
	<script language='javascript'>
		function bindEvents(obj) {

			var index = obj.attr('index');

			var rs = new Resize(obj, {
				Max: true,
				mxContainer: "#poster"
			});
			rs.Set($(".rRightDown", obj), "right-down");
			rs.Set($(".rLeftDown", obj), "left-down");
			rs.Set($(".rRightUp", obj), "right-up");
			rs.Set($(".rLeftUp", obj), "left-up");
			rs.Set($(".rRight", obj), "right");
			rs.Set($(".rLeft", obj), "left");
			rs.Set($(".rUp", obj), "up");
			rs.Set($(".rDown", obj), "down");
			rs.Scale = true;
			var type = obj.attr('type');
			if(type == 'nickname' || type == 'img' || type == 'title' || type == 'marketprice' || type == 'productprice' || type == 'mobile' || type == 'date' || type == 'days' || type == 'ratio' || type == 'relay' || type == 'clock' || type == 'time' || type == 'realname' || type == 'company' || type == 'relayday') {
				rs.Scale = false;
			}
			new Drag(obj, {
				Limit: true,
				mxContainer: "#poster"
			});
			$('.drag0 .remove').unbind('click').click(function() {
				$(this).parent().remove();
			})

			$.contextMenu({
				selector: '.drag0[index=' + index + ']',
				callback: function(key, options) {
					var index = parseInt($(this).attr('zindex'));

					if(key == 'next') {
						var nextdiv = $(this).next('.drag0');
						if(nextdiv.length > 0) {
							nextdiv.insertBefore($(this));
						}
					} else if(key == 'prev') {
						var prevdiv = $(this).prev('.drag0');
						if(prevdiv.length > 0) {
							$(this).insertBefore(prevdiv);
						}
					} else if(key == 'last') {
						var len = $('.drag0').length;
						if(index >= len - 1) {
							return;
						}
						var last = $('#poster .drag0:last');
						if(last.length > 0) {
							$(this).insertAfter(last);
						}
					} else if(key == 'first') {
						var index = $(this).index();
						if(index <= 1) {
							return;
						}
						var first = $('#poster .drag0:first');
						if(first.length > 0) {
							$(this).insertBefore(first);
						}
					} else if(key == 'delete') {
						$(this).remove();
					}
					var n = 1;
					$('.drag0').each(function() {
						$(this).css("z-index", n);
						n++;
					})
				},
				items: {
					"next": {
						name: "调整到上层"
					},
					"prev": {
						name: "调整到下层"
					},
					"last": {
						name: "调整到最顶层"
					},
					"first": {
						name: "调整到最低层"
					},
					"delete": {
						name: "删除元素"
					}
				}
			});
			obj.unbind('click').click(function() {
				bind($(this));
			})

		}
		var imgsettimer = 0;
		var nametimer = 0;
		var bgtimer = 0;

		function clearTimers() {
			clearInterval(imgsettimer);
			clearInterval(nametimer);
			clearInterval(bgtimer);
		}

		function getImgUrl(val) {

			if(val.indexOf('http://') == -1) {
				val = "{$imgroot}" + val;
			}
			return val;
		}

		function bind(obj) {
			var imgset = $('#imgset'),
				nameset = $("#nameset"),
				qrset = $('#qrset');
				xcxqrset = $('#xcxqrset');
			imgset.hide(), nameset.hide(), qrset.hide(), xcxqrset.hide();
			clearTimers();
			var type = obj.attr('type');
			if(type == 'img') {
				imgset.show();
				var src = obj.attr('src');
				var input = imgset.find('input');
				var img = imgset.find('img');
				if(typeof(src) != 'undefined' && src != '') {
					input.val(src);
					img.attr('src', getImgUrl(src));
				}

				imgsettimer = setInterval(function() {
					if(input.val() != src && input.val() != '') {
						var url = getImgUrl(input.val());

						obj.attr('src', input.val()).find('img').attr('src', url);
					}
				}, 10);

			} else if(type == 'nickname' || type == 'title' || type == 'marketprice' || type == 'productprice' || type == 'mobile' || type == 'date' || type == 'days' || type == 'ratio' || type == 'relay' || type == 'clock' || type == 'time' || type == 'realname' || type == 'company' || type == 'relayday') {

				nameset.show();
				var color = obj.attr('color') || "#000";
				var size = obj.attr('size') || "16";
				var input = nameset.find('input:first');
				var namesize = nameset.find('#namesize');
				var picker = nameset.find('.sp-preview-inner');
				input.val(color);
				namesize.val(size.replace("px", ""));
				picker.css({
					'background-color': color,
					'font-size': size
				});

				nametimer = setInterval(function() {
					obj.attr('color', input.val()).find('.text').css('color', input.val());
					obj.attr('size', namesize.val() + "px").find('.text').css('font-size', namesize.val() + "px");
				}, 10);

			} else if(type == 'qr') {
				qrset.show();
				var size = obj.attr('size') || "3";
				var sel = qrset.find('#qrsize');
				sel.val(size);
				sel.unbind('change').change(function() {
					obj.attr('size', sel.val())
				});
			} else if(type == 'xcxqr') {
				xcxqrset.show();
				var size = obj.attr('size') || "3";
				var sel = xcxqrset.find('#xcxqrsize');
				sel.val(size);
				sel.unbind('change').change(function() {
					obj.attr('size', sel.val())
				});
			}
		}

		$(function() {
			{if !empty($item['id'])} 
				$('.drag0').each(function() {
					bindEvents($(this));
				}) 
			{/if}

			//改变背景
			$('#bgset').find('button:first').click(function() {
				var oldbg = $(':input[name=bg]').val();
				bgtimer = setInterval(function() {
					var bg = $(':input[name=bg]').val();
					if(oldbg != bg) {
						bg = getImgUrl(bg);

						$('#poster .bg').remove();
						var bgh = $("<img src='" + bg + "' class='bg' />");
						var first = $('#poster .drag0:first');
						if(first.length > 0) {
							bgh.insertBefore(first);
						} else {
							$('#poster').append(bgh);
						}

						oldbg = bg;
					}
				}, 10);
			})

			$('.btn-com').click(function() {

				var imgset = $('#imgset'),
					nameset = $("#nameset"),
					qrset = $('#qrset');
					xcxqrset = $('#xcxqrset');
				imgset.hide(), nameset.hide(), qrset.hide(), xcxqrset.hide();
				clearTimers();

				if($('#poster img').length <= 0) {
					//alert('请选择背景图片!');
					//return;
				}
				var type = $(this).data('type');
				var img = "";
				if(type == 'qr') {
					img = '<img src="../addons/{php echo MODULE_NAME}/static/img/qr.jpg" />';
				} else if(type == 'xcxqr') {
					img = '<img src="../addons/{php echo MODULE_NAME}/static/img/xcxqr.jpg" />';
				} else if(type == 'head') {
					img = '<img src="../addons/{php echo MODULE_NAME}/static/img/head.jpg" />';
				} else if(type == 'img' || type == 'thumb') {
					img = '<img src="../addons/{php echo MODULE_NAME}/static/img/img.jpg" />';
				} else if(type == 'nickname') {
					img = '<div class=text>昵称</div>';
				}else if(type == 'company') {
					img = '<div class=text>腾讯***有限公司</div>';
				}else if(type == 'relayday') {
					img = '<div class=text>555</div>';
				}
				var index = $('#poster .drag0').length + 1;
				var obj = $('<div class="drag drag0" type="' + type + '" index="' + index + '" style="z-index:' + index + '">' + img + '<div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>');

				$('#poster').append(obj);

				bindEvents(obj);

			});

			$('.drag0').click(function() {
				bind($(this));
			})

		})
	</script>
{template 'common/footer'}